<template>
    <v-md-editor v-model="text" height="600px"></v-md-editor>
    <v-md-preview :text="text"></v-md-preview>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
let text = ref(`
## 组件小计
> 各种遇到的效果,具有公用的效果封装封装方便使用
> 顺便小操手ts vue3
## 目录
1. 封装组件目录 src/packages
    > src/packages/index
2. 路由页面目录 src/views/demos
3. 路由列表目录 src/router/menu/index.ts
## 组件列表
1. 日历组件
    - 可以修改中英文的周，开始周（周一周日）；
    - 自定义每日的dom；
2. 一周的组件
    - 可以修改中英文的周，开始周（周一周日）；
    - 自定义每日的dom；
3. 图片预览缩放组件
    - h5端 图片预览缩放
4. 文本收起展开组件
    - 在文本后追加文字点击该文字收起展开
5. drag api拖拽事件
    - 不需要判断边界啊什么的简单的方式
6. 可以展开收起的日历
    - 展开状态显示一个月的日期；
    - 收起状态展示当前选中日期一周的日期；
    - 同样支持修改中英文的周显示，开始周（周一周日）；
    - 自定义每天的样式dom的插槽；
    - 鼠标可以拖拽；touch事件也可以；
7. 数字滚动组件
    - 传入数值滚动效果；
    - 动态修改传入值动画变动；
8. 列表轮播组件；
    - 用于公告轮播；
    - 抽奖中奖名单轮播的；
9. echarts记录（v5.4.1）
    - **echarts的版本不一样文档内容不一致**
    - **echarts使用3d和gl相关的需要引入 import 'echarts-gl';文档在配置文档左侧顶部gl内** 
    - echarts简单封装；使其达到dom大小变化echarts动态resize；
    - treemap类型图；达到数值大小所占区域所占百分比；
    - echarts地图非gl版本的视觉3d效果；（gl版本现在存在诸多问题，打点显示问题；纹理添加问题等等）；
10. canvas简单效果；
    - 心图
    - 刻度钟
`);
</script>
<style lang="less" scoped></style>